<template>
  <view class="person-container dark">
    <view class="status-bar"></view>
    <view class="back-view">
      <i class="iconfont icon-arrow-left icon-back" @click="goBack" style="" />
    </view>
    <me-nav :bgImg="bgImg" />
    <userInfo
      :followed="followed"
      @update:followed="handleFollowUpdate"
      :userId="videoUserId"
    />
  </view>
</template>

<script>
  import storage from "@/utils/storage";
  import meNav from "@/components/me/me-nav.vue";
  import userInfo from "@/components/personal/user-info.vue";
  export default {
    name: "me",
    components: {
      meNav,
      userInfo,
    },
    data() {
      return {
        bgImg: "/static/img/me.jpg",
        followed: false,
        videoUserId: "",
      };
    },
    computed: {
      follow_key() {
        const currentUserId = "1";
        return `${currentUserId}:${this.videoUserId}:followed`;
      },
    },
    methods: {
      goBack() {
        uni.navigateBack();
      },
      handleFollowUpdate(newFollowed) {
        this.followed = newFollowed;
        // uni.setStorageSync(follow_key, this.followed);
        storage.set(this.follow_key, this.followed);

        // （可选）这里可以添加接口请求，比如调用“关注/取消关注”的后端接口
        // uni.request({ url: '/api/follow', data: { followed: newFollowed } });
      },
      initFollowed() {
        // 从 后台/api/xx 获取这个状态
        // 现在从本地缓存中获取
        // const followed = uni.getStorageSync(follow_key);
        const followed = storage.get(this.follow_key);
        if (followed) {
          this.followed = followed;
        }
      },
    },
    mounted() {
      this.initFollowed();
    },
    onLoad(options) {
      this.videoUserId = options.videoUserId;
    },
  };
</script>

<style>
  .status-bar {
    background-color: #fff;
  }
  .icon-back {
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 8px;
    left: 8px;
  }
  .person-container {
    height: 100vh;
    background-color: #171827;
    overflow-y: auto;
  }
  .person-container::-webkit-scrollbar {
    display: none;
  }
  .back-view {
    position: relative;
  }
</style>
